<template>
  <intro-view :usage="usage" v-if="$route.name == 'picker'">
    <div ref="page">
      列互不相关{{selectedValue1}}
      <ui-picker v-model="selectedValue1" :fullValue.sync="selectedFullValue" :data="data1" immediate style="background: #fff"></ui-picker>
      级联{{selectedValue2}}
      <ui-picker v-model="selectedValue2" :data="data2" immediate></ui-picker>
      <hr>
      <button @click="showPicker">showPickerDialog</button>
    </div>
  </intro-view>
  <router-view v-else/>
</template>

<script>
  import usage from './usage.md'
  export default {
    data() {
      return {
        usage,
        selectedValue1: ['4', 'b'],
        selectedValue2: ['c', 'c1', 'c12'],
        selectedFullValue: [],
        data1: [],
        data2: []
      }
    },
    methods: {
      showPicker () {
        this.$UiPickerDialog.new({
          onEl: this.$refs['page'],
          // value: [],
          data: [
            [
              {value: 'a1', children: [{value: 'a11'}, {value: 'a12'}, {value: 'a13'}, {value: 'a14'}, {value: 'a15'}]},
              {value: 'b1', children: [{value: 'b11'}, {value: 'b12'}, {value: 'b13'}, {value: 'b14'}, {value: 'b15'}]}
            ]
          ],
          // 点击确定回调地址
          callback: (value) => { console.log(value) }
        })
      }
    },
    mounted () {
      setTimeout(() => {
        let data1 = [{value: '1'}, {value: '2'}, {value: '3'}, {value: '4'}, {value: '5'}, {value: '6', disabled: true}, {value: '7'}, {value: '8'}]
        let data2 = [{value: 'a'}, {value: 'b'}, {value: 'c'}, {value: 'd'}, {value: 'e'}, {value: 'f'}, {value: 'g'}]
        let dataCas = [
          { value: 'a', children: [{value: 'a1', children: [{value: 'a11'}, {value: 'a12'}, {value: 'a13'}]}] },
          { value: 'b', children: [{value: 'b1'}, {value: 'b2'}] },
          { value: 'c', children: [{value: 'c1', children: [{value: 'c11'}, {value: 'c12'}, {value: 'c13'}]}] }
        ]
        this.data1 = [data1, data2]
        this.data2 = [dataCas]
      })
    }
  }
</script>
